<template>
    <div class="madp-customer-group-list">
        <basic-container>
            <BackTitle title="成员持群详情" @goBack="goBack(0)" />
        </basic-container>
        <basic-container>
            <!--顶部搜索表单-->
            <div class="madp-group-list-search">
                <el-form ref="searchForm" :model="searchForm" label-width="100px">
                    <el-form-item label="客群名称:" prop="workRoomName">
                        <el-input placeholder="请输入客群名称" @input="searchForm.workRoomName = searchForm.workRoomName.replace(/\s+/g, '')" v-model.trim="searchForm.workRoomName"></el-input>
                    </el-form-item>
                    <el-form-item label="创建日期:" prop="createTime">
                        <el-date-picker
                            v-model="searchForm.createTime"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="{
                                disabledDate(time) {
                                    return time.getTime() > Date.now();
                                }
                            }"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="状态:" prop="workRoomStatus">
                        <el-select v-model="searchForm.workRoomStatus" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.workRoomStatus" :label="item.label" :value="item.workRoomStatus"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="madp-item-btn">
                        <el-button type="primary" @click="handleSearch" style="margin-left: 5px">搜索</el-button>
                        <el-button @click="handleDelete">清空</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="madp-synchronous-btn">
                <p>
                    <el-button type="primary" @click="handleRefresh">同步客群</el-button>
                </p>
                <p>最后一次同步时间: {{ syncWorkRoomTime }}</p>
            </div>
            <!--列表-->
            <div class="madp-table">
                <el-table
                    :header-cell-style="{
                        background: 'rgb(255, 191, 191)',
                        color: 'rgb(44,44,44)'
                    }"
                    stripe
                    :data="customerData"
                    v-loading="loadingList"
                >
                    <el-table-column align="center" width="60" label="序号">
                        <template slot-scope="scope">{{ (page.currentPage - 1) * page.pageSize + scope.$index + 1 }}</template>
                    </el-table-column>
                    <el-table-column align="center" label="群名称（人数）" width="150">
                        <template slot-scope="scope">{{ scope.row.roomName + '（' + scope.row.memberNum + '）' }}</template>
                    </el-table-column>
                    <el-table-column prop="ownerName" align="center" label="群主" width="120"></el-table-column>
                    <el-table-column prop="statusText" align="center" label="状态" width="60"></el-table-column>
                    <el-table-column align="center" label="今日入群/退群" width="160">
                        <template slot-scope="scope">{{ scope.row.inRoomNum + '/' + scope.row.outRoomNum }}</template>
                    </el-table-column>
                    <el-table-column prop="notice" align="center" label="群公告">
                        <template slot-scope="scope">
                            <p class="madp-table-notice">{{ scope.row.notice ? scope.row.notice : '-' }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" align="center" label="创建时间" width="240"></el-table-column>
                    <el-table-column align="center" label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleDetails(scope.row)">查看</el-button>
                            <el-button type="text" @click="handleStatistical(scope.row)">统计</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col :span="24" class="toolbar" style="margin-top: 5px">
                        <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page.currentPage"
                            :page-sizes="[10, 20, 30, 50, 100]"
                            :page-size="page.pageSize"
                            layout="total,sizes, prev, pager, next, jumper"
                            :total="page.total"
                            style="float: right"
                        ></el-pagination>
                    </el-col>
                </el-row>
            </div>
        </basic-container>
        <!-- 查看弹框 开始 -->
        <el-dialog :title="dialogTitle" top="5vh" :visible.sync="dialogShow" :close-on-click-modal="false" append-to-body width="80%">
            <div class="madp-top">
                <div class="madp-img" v-loading="loadingDetailList">
                    <img :src="avatar" width="100%" height="100%" alt />
                </div>
                <div class="madp-desc">
                    <div>群主: {{ dialogData.ownerName }}</div>
                    <div>创建时间: {{ dialogData.createTime }}</div>
                    <div>
                        群公告:{{ dialogData.notice ? ' ' : '未设置' }}
                        <span v-if="!!dialogData.notice">
                            <el-button type="text" v-show="down" @click="handleDown">
                                展开
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-button type="text" v-show="!down" @click="handleUp">
                                收起
                                <i class="el-icon-arrow-up el-icon--right"></i>
                            </el-button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="madp-notice-desc" v-if="show">
                <ul>
                    <li>
                        <div style="margin-top: 5px">{{ dialogData.notice }}</div>
                    </li>
                </ul>
            </div>
            <div style="margin: 15px 0; align-items: center">
                <el-row>
                    <el-col :span="8">
                        <p style="font-weight: 700">群成员（{{ dialogData.memberNum }}）</p>
                    </el-col>
                    <el-col :span="16">
                        <div style="display: flex">
                            <el-input style="width: 200px; margin-right: 10px" placeholder="请输入群成员" @input="name = name.replace(/\s+/g, '')" v-model.trim="name"></el-input>
                            <el-button type="primary" @click.prevent="handleQuery">查询</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div>
                <el-table
                    :data="tableData"
                    v-loading="loadingDetailList"
                    :header-cell-style="{
                        background: 'rgb(255, 191, 191)',
                        color: 'rgb(44,44,44)'
                    }"
                    stripe
                >
                    <el-table-column align="center" width="50" label="序号">
                        <template slot-scope="scope">{{ (dialogPage.currentPage - 1) * dialogPage.pageSize + scope.$index + 1 }}</template>
                    </el-table-column>
                    <el-table-column prop="name" align="center" label="群成员"></el-table-column>
                    <el-table-column prop="name" align="center" label="群昵称"></el-table-column>
                    <el-table-column prop="joinTime" align="center" label="进群时间"></el-table-column>
                    <el-table-column prop="joinSceneText" align="center" label="进群方式"></el-table-column>
                </el-table>
                <el-row>
                    <el-col :span="24" class="toolbar" style="margin-top: 5px">
                        <el-pagination
                            background
                            :current-page="dialogPage.currentPage"
                            @size-change="handleMemberSizeChange"
                            @current-change="handleMemberCurrentChange"
                            :page-sizes="[10, 20, 30, 50, 100]"
                            :page-size="dialogPage.pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="dialogPage.total"
                            style="float: right"
                        ></el-pagination>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>
        <!-- 查看弹框 结束 -->
    </div>
</template>

<script>
import { getWorkRoomList, putSync, getWorkContactRoom } from '@/api/customer-group/group-list';
import { getStore } from '../../../util/store';

export default {
    name: 'customerGroupList',
    props: ['employeeId'],
    data() {
        return {
            // 表格loading
            loadingList: true,
            loadingDetailList: true,
            //查询数据
            searchForm: {
                workRoomName: '',
                workRoomOwnerId: '', //群主id
                createTime: [],
                workRoomStatus: ''
            },
            //同步时间
            syncWorkRoomTime: '',
            options: [{ label: '正常', workRoomStatus: 0 }, { label: '跟进人离职', workRoomStatus: 1 }, { label: '离职继承中', workRoomStatus: 2 }, { label: '离职继承完成', workRoomStatus: 3 }],
            //列表数据
            customerData: [],
            // 分页
            page: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 10 // 每页显示多少条
            },
            //弹窗title
            dialogTitle: '',
            dialogData: {
                workRoomId: '',
                ownerName: '',
                createTime: '',
                notice: '',
                memberNum: ''
            },
            // 弹窗开关
            dialogShow: false,
            // 表格数据
            tableData: [],
            name: '',
            dialogPage: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 10 // 每页显示多少条
            },
            show: false, //公告详情
            down: true, //公告展开
            avatar: '' //头像路径
        };
    },
    mounted() {
        this.getList(this.page);
    },
    methods: {
        // 返回
        goBack(val) {
            this.$emit('goBack', val);
        },
        //列表
        getList(page, params) {
            let obj = Object.assign({ current: page.currentPage, size: page.pageSize }, params);
            this.loadingList = true;
            obj.employeeId = this.employeeId;
            getWorkRoomList(obj)
                .then((res) => {
                    if (res.data.code === 0) {
                        this.customerData = res.data.data.records;
                        this.page.total = res.data.data.total;
                        //同步时间
                        this.syncWorkRoomTime = res.data.data.extraProps.syncWorkRoomTime;
                    }
                    this.loadingList = false;
                })
                .catch(() => {
                    this.loadingList = false;
                });
        },
        /*
         * 查看->查询
         * */
        handleQuery() {
            this.dialogPage.currentPage = 1;
            this.getMemberList(this.dialogPage, {
                name: this.name,
                workRoomId: this.dialogData.workRoomId
            });
            this.name = '';
        },
        // 分页
        handleMemberSizeChange(pageSize) {
            this.dialogPage.pageSize = pageSize;
            this.getMemberList(this.dialogPage, { ...this.dialogData });
        },
        handleMemberCurrentChange(currentPage) {
            this.dialogPage.currentPage = currentPage;
            this.getMemberList(this.dialogPage, { ...this.dialogData });
        },
        /*
         * 查看->展开公告
         * */
        handleDown() {
            this.show = true;
            this.down = false;
        },
        handleUp() {
            this.show = false;
            this.down = true;
        },
        /*
         * 统计
         * */
        handleStatistical(row) {
            this.$emit('goBack', { type: 2, workRoomId: row.workRoomId });
        },
        /*
         * 查看
         * */
        handleDetails(row) {
            this.getMemberList(this.dialogPage, { workRoomId: row.workRoomId });
            this.dialogTitle = row.roomName;
            this.dialogShow = true;
            this.dialogData = { ...row };
        },
        // 获取成员list
        getMemberList(page, params) {
            this.loadingDetailList = true;
            let obj = Object.assign({ current: page.currentPage, size: page.pageSize }, params);
            if (!obj.name) {
                delete obj.name;
            }
            getWorkContactRoom(obj)
                .then((res) => {
                    if (res.data.code === 0) {
                        this.tableData = res.data.data.records;
                        this.dialogPage.total = res.data.data.total;
                        if (res.data.data.extraProps && res.data.data.extraProps.groupOwner) {
                            this.avatar = res.data.data.extraProps.groupOwner.avatar;
                        }
                    }
                    this.loadingDetailList = false;
                })
                .catch(() => {
                    this.loadingDetailList = false;
                });
        },
        /*
         * 搜索
         * */
        handleSearch() {
            let data = Object.assign({ startTime: '', endTime: '' }, this.searchForm);
            if (data.createTime.length > 0) {
                data.startTime = this.searchForm.createTime[0];
                data.endTime = this.searchForm.createTime[1];
            }
            delete data.createTime;
            this.page.currentPage = 1;
            this.getList(this.page, data);
        },
        /*
         * 清空
         * */
        handleDelete() {
            this.$refs.searchForm.resetFields();
            this.getList(this.page);
        },
        /*
         * 同步客群
         * */
        handleRefresh() {
            let corpId = getStore({ name: 'corps' }).corpId;
            putSync({ corpId }).then((res) => {
                if (res.data.code === 0) {
                    this.$message({
                        type: 'success',
                        message: '同步成功'
                    });
                    this.getList(this.page);
                }
            });
        },
        /**
         * 分页-改变每页记录条数触发查询
         **/
        handleSizeChange(pageSize) {
            this.page.pageSize = pageSize;
            this.getList(this.page);
        },
        /**
         * 分页-改变当前页码记录条数触发查询
         **/
        handleCurrentChange(currentPage) {
            this.page.currentPage = currentPage;
            this.getList(this.page);
        }
    }
};
</script>

<style scoped lang="scss">
.madp-customer-group-list {
    .madp-group-list-search {
        .el-form {
            display: flex;
            justify-content: flex-end;
        }

        .madp-item-btn {
            /deep/ .el-form-item__content {
                display: flex;
                margin-left: 0 !important;
            }
        }
    }

    .madp-synchronous-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
}

.el-dialog {
    .madp-top {
        display: flex;
        margin-bottom: 15px;

        .madp-desc {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
    }

    .madp-notice-desc {
        border: 1px solid #cccccc;
        width: 100%;
        min-height: 100px;
        padding: 5px 10px;

        li {
            margin-bottom: 15px;
        }
    }

    .madp-img {
        margin-right: 10px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 1px solid #eeeeee;
    }
}
.el-range-editor--medium.el-input__inner {
    width: 100%;
}
/deep/.el-date-editor .el-range-separator {
    width: 25px;
}
.madp-table-notice {
    width: 100%;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 5; /** 显示的行数 **/
    overflow: hidden; /** 隐藏超出的内容 **/
}
</style>
